<template>
  <div class="box">
    <div class="header">
      <van-nav-bar
        title="商品详情"
        left-arrow
        @click-left="$router.back()"
      />
    </div>
    <div class="content">
       <div><img :src="detailInfo.image" alt="" style="width:100%;"></div>
                  <div>
                      <p class="van-multi-ellipsis--l2">{{detailInfo.title}}</p>
                      <p style="color:red;">￥{{detailInfo.price}}</p>
                  </div>


         <van-cell title="开会员可省0.32元" is-link value="查看详情" class="grid" />      
           <van-cell title="榜单 已入选第2名" is-link value="" class="grid2"/>         
    </div>

   <van-action-bar>
  <van-action-bar-icon icon="chat-o" text="客服" dot />
  <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
   <van-action-bar-icon icon="cart-o" text="购物车" :badge="store.totalCount" @click="$router.push('/cart')"/>
  <van-action-bar-button type="warning" text="马上抢" />
  <van-action-bar-button type="danger" text="加入购物车" @click="addCart" />
</van-action-bar>
  </div>
</template>

<script setup>
import request from '@/utils/request'
import {ref,onMounted} from 'vue'
import {useCounterStore} from '@/stores/counter'
import shake from '@/utils/shake'
import {useRoute} from 'vue-router'
const route = useRoute()
const store =useCounterStore()
const detailInfo =ref({})
onMounted(()=>{
    
     request.get('/detail',{
        params:{
            id:route.params.id
        }
     }).then(res=>{
        if(res.data.code==200)
        {
            detailInfo.value=res.data.data
        }
     })
})
const addCart=shake(()=>{
     //数据加入到购物车中
     store.addItem(detailInfo.value)
},1000)
</script>

<style lang="scss" scoped>
.grid{
    margin-top: 30px;
}
.grid2{
    margin-top: 20px;
}
</style>